/*
* @Author: syyao
* @Date: 2019-05-17 15:22:22
 * @Last Modified by: hui
 * @Last Modified time: 2019-06-12 01:09:28
*/
<style scoped>
   @import "../css/general.css";
   @import "../css/normalize.css";
   @import "../css/set_11.css";
  @import "../css/set_15.css";

  .hui /deep/ .ivu-modal-body {
    padding: 0px;
  }

  .l-bj {
    background: url("../assets/l-bj1.jpg") center center no-repeat;
    background-size: cover;
    height: 100%;
  }
</style>

<template>
  <div style="height: 100%">
    <div id="nav">
      <div style="height: 10%">
        <img src="../assets/rocket.png" style="width: 2.5vw;margin-top:1vw">
        <!-- <img src="../assets/eye.png" style="width: 3vw;margin-top:1vw"> -->
      </div>
      <div style="height: 80%;">
        <div class="box">
          <Tooltip content="首页" placement="right" transfer style="margin: 15px auto 15px auto;">
            <router-link to="/" class="nav-item">
              <img src="../assets/home.png" style="width: 2vw">
            </router-link>
          </Tooltip>
          <br>
          <Tooltip content="图片仓库" placement="right" transfer style="margin: 15px auto 15px auto">
            <router-link to="/pictureHub" class="nav-item">
              <img src="../assets/pictureHub.png" style="width: 2vw">
            </router-link>
          </Tooltip>
          <br>
          <Tooltip content="个人仓库" placement="right" transfer style="margin: 15px auto 15px auto">
            <router-link to="/personalHub" class="nav-item">
              <img src="../assets/personalHub.png" style="width: 2vw">
            </router-link>
          </Tooltip>
        </div>
      </div>
      <div style="height: 10%;text-align: center;">
            <!-- <div class="set_11_buttons animated" style="width:1vw"> 
                <a href="#" class="facebook"><Icon type="md-add" /></a>
            </div> -->
            <div v-if="!user.UIsLogin" name="login">
              <Tooltip content="登陆 / 注册" placement="top" transfer style="margin-top:1.3vw;">
              <div class="set_15_social-buttons">
		             <div @click="showLog" class="set_15_social-button Vfacebook"><Icon class="fa" type="md-send" color="#fff" size="20"/></div>
              </div>
              </Tooltip>
            </div>
        <!-- <div v-if="!user.UIsLogin" name="login">
          <p class="nav-item" style="font-size: 14px" @click="showLog">登录/注册</p>
        </div> -->
        <div v-else name="person" class="panel" v-bind:class="{homePanel:routerName==='home'||routerName==='error'}">
          <Row style="height:100%">
            <i-col :span="span" style="border-right:#e8e8e8 1px solid;height:100%">
              <div style="margin:1vw auto auto auto;width:3vw;">
                <Tooltip content="个人中心" placement="right" transfer>
                  <img class="image" :src="user.info.picture" v-on:click="showPerson">
                </Tooltip>
              </div>
            </i-col>
            <i-col span="20" style="text-align:left" v-if="routerName!=='home'">
              <Row>
                <i-col span="15">
                  <p
                    style="margin-left:1.5vw;margin-top:1.5vw;font-size:1vw;color: #44519E;font-weight: bold;font-family: SimHei">
                    {{user.info.nickname}}</p>
                  <!-- <div style="margin-top:0.2vw;">
                                        <label
                                            style="margin-left:1.5vw;font-family: STHeiti;font-size:0.7vw;"
                                        >
                                            保管图片
                                            <span style="color:#1DACFF;margin-left:0.1vw;">123</span>
                                        </label>
                                        <label
                                            style="margin-left:0.3vw;font-family: STHeiti;font-size:0.7vw;"
                                        >
                                            收藏图片
                                            <span style="color:#1DACFF;margin-left:0.1vw">123</span>
                                        </label>
                                    </div> -->
                </i-col>
                <i-col span="5">
                  <Tooltip content="退出登录" placement="top" transfer style="margin-top:1.3vw;margin-left:0.5vw;">
                    <img src="../assets/exit.png" style="width:2.2vw;" v-on:click='logout'>
                  </Tooltip>
                </i-col>
                <i-col span="4">
                  <Tooltip content="消息中心" placement="top" transfer style="margin-top:1.3vw;">
                    <Badge dot style="margin-top:0.1vw">
                      <img :src="message" style="width:2.0vw;" v-on:click="showMessage">
                    </Badge>
                  </Tooltip>
                </i-col>
              </Row>
            </i-col>
          </Row>
        </div>
        <Modal v-model="isShow" :footer-hide="isHide" :mask-closable="mask_closable" class="hui" width="800"
          height="439px">
          <Row>
            <i-col span="12">
              <div style="width:100%;height:239px;text-align: center;">
                <img src="../assets/l-bj1.jpg"
                  style="margin-left: 43px;width:90%;margin-top:-30px;box-shadow: 3px 0px  5px rgb(141, 141, 141),-3px 0px  5px rgb(141, 141, 141);">
              </div>
            </i-col>
            <i-col span="12" style="height: 439px;">
              <Row style="width:240px;;margin:0 auto;margin-top:20px;">
                <i-col span="12">
                  <p @click="isLogin=true" style="font-size:15px;">登录</p>
                  <div v-if="isLogin" style="width:29px;height:5px;background:#33c7ff;margin-top: 3px;"></div>
                </i-col>
                <i-col span="12" style="text-align: right;">
                  <p @click="isLogin=false" style="font-size:15px;">注册</p>
                  <div v-if="!isLogin"
                    style="width:29px;height:5px;background:#33c7ff;margin-top: 3px;float: right;margin-right: 2px;">
                  </div>
                </i-col>
              </Row>

              <div v-if="isLogin">
                <div style="text-align: center;height: 80px;margin-top: 10px;">
                  <img src="../assets/login.jpg">
                </div>
                <My_login v-bind:isShow.sync="isShow" :initialize="isShow"></My_login>
              </div>
              <div v-else>
                <div style="text-align: center;height: 90px;">
                  <img src="../assets/logon.jpg">
                </div>
                <My_logon v-bind:isShow.sync="isShow"></My_logon>
              </div>
            </i-col>
          </Row>
        </Modal>
        <Drawer :width="personWidth" v-model="value1" class="drawer-background" v-if="user.UIsLogin">
          <person v-if="value1" />
        </Drawer>

        <Drawer :width="personWidth" v-model="value2" class="drawer-background" v-if="user.UIsLogin">
          <messageBox></messageBox>
        </Drawer>
      </div>
    </div>
  </div>
</template>
<script>
  import my_login from "./Login";
  import my_logon from "./Logon";
  import Person from "../views/Person";
  import message from "../assets/message.png";
  import messageBox from './messageBox'

  export default {
    components: {
      Person,
      My_login: my_login,
      My_logon: my_logon,
      messageBox
    },
    data() {
      return {
        isShow: false,
        isLogin: true,
        isHide: true,
        mask_closable: false,
        user: {
          info: {},
          UIsLogin: false
        },
        value1: false,
        value2: false,
        message: message,
        routerName: ""
      };
    },
    watch: {
      "$store.state.user.info": function (newVal) {
        this.user.info = {
          ...newVal
        };
      },
      "$store.state.user.isLogin": function (newVal) {
        this.user.UIsLogin = newVal;
      },
      "$store.state.loginFilter": function (newVal) {
        //拦截登录
        if (newVal === true) {
          this.isShow = newVal;
        }
      },
      $route(to, from) {
        this.routerName = this.$route.name;
      }
    },
    methods: {
      showLog() {
        this.isShow = true;
      },
      showPerson() {
        this.value1 = true;
      },
      showMessage() {
        this.value2 = true;
      },
      logout() {
        let _this = this
        this.http.post(this, '/logout').then(function (msg) {
          _this.$store.commit('clearAll');
          _this.$router.push({
            name: 'home'
          })
        })
      }
    },
    computed: {
      personWidth() {
        // return (1-(1/24)-((23/24)*(5/24)))*100;
        return 76;
      },
      span() {
        if (this.routerName === "home" || this.routerName === 'error') {
          return 24;
        } else {
          return 4;
        }
      }
    }
  };
</script>
<style scoped>
  #nav {
    margin: 0 auto;
    height: 100%;
    text-align: center;
    position: fixed;
    width: 4.16666667%;
  }

  #nav a {
    font-size: 14px;
    color: #2c3e50;
  }

  #nav a.router-link-exact-active {
    color: #33c7ff;
  }

  .nav-item {
    font-size: 24px;
  }

  .left {
    font-size: 2vw;
    font-style: oblique;
    margin-top: -7px;
  }

  .box {
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
  }

  .image {
    width: 3vw;
    margin: auto;
    border: #2b85e4 2px solid;
    border-radius: 3vw;
  }

  .drawer-background /deep/ .ivu-drawer-content {
    background-color: rgb(245, 247, 249);
  }

  .panel {
    background-color: #ffffff;
    width: 25vw;
    height: 100%;
  }

  .homePanel {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
  }
</style>